<template>
  <view class="tianxuan-content">
    <!-- 头部 -->
    <view class="top-cover-information">
      <view class="left-cover" @click="openDrawOne">
        <image :src="blindboxDetail ? blindboxDetail.box.img : ''"></image>
      </view>
      <view class="right-information">
        <view class="box-name">
          <view class="name-tit">{{ blindboxDetail.box.name }}</view>
          <view class="select-btn" @click="changebox">
            <text class="">选箱</text>
          </view>
        </view>

        <view class="mid-level">
          <template
            v-for="(good, index) in blindboxDetail.goods_info"
            :key="index"
          >
            <view
              class="Leavel-list"
              v-if="showBoxRule2.includes(good.rule_name)"
            >
              <view class="level-img">
                <image :src="good.rule_img"></image>
              </view>
              <view class="leavel-num">
                <text>{{ good.leftover }}/{{ good.num }}</text>
              </view>
            </view>
          </template>
        </view>
        <view class="money-number">
          <view class="money">
            <text class=""
              >￥{{ blindboxDetail ? blindboxDetail.box.price : '' }}</text
            >
          </view>
          <view class="number">
            <text class="">余</text>
            <text class="" style="color: #a281eb">{{
              blindboxDetail ? blindboxDetail.case_info.leftover : ''
            }}</text>
            <text class="">共</text>
            <text class="" style="color: #a281eb">{{
              blindboxDetail ? blindboxDetail.case_info.sum : ''
            }}</text>
          </view>
        </view>
        <!-- start 进度条 -->
        <view class=""></view>
        <!-- end -->
      </view>
    </view>
    <!-- 奖池预览 -->
    <view class="goods-preview">
      <!-- 标签 -->
      <view class="goods-lable">
        <view class="last-select">
          <view class="last-name" @click="prevent">上一箱</view>
        </view>
        <view class="all-goods">
          <text
            :class="current === 0 ? 'borderBottom' : ''"
            :style="{ color: current === 0 ? '#9F7AF5' : '' }"
            @click="swithTab(0)"
            >奖池预览</text
          >
          <text
            :class="current === 1 ? 'borderBottom' : ''"
            :style="{ color: current === 1 ? '#9F7AF5' : '' }"
            @click="swithTab(1)"
            >开赏记录</text
          >
          <text
            :class="current === 2 ? 'borderBottom' : ''"
            :style="{ color: current === 2 ? '#9F7AF5' : '' }"
            @click="swithTab(2)"
            v-if="showcc == true"
            >冲冲赏</text
          >
        </view>
        <view class="last-select next-select">
          <view class="last-name next-name" @click="next">下一箱</view>
        </view>
      </view>
      <!-- 内容区域 -->
      <view class="all-goods-list" v-if="current === 0">
        <view
          class="tianxuan-goods"
          v-for="(item, index) in blindboxDetail
            ? blindboxDetail.goods_info
            : []"
          :key="index"
          @click="openDetail(item)"
        >
          <view class="tianxuan-goods-img">
            <image :src="item.img" class=""></image>
          </view>
          <view class="goods-number">
            <text class="about-level">{{ item.goods_name }}</text>
          </view>
          <view class="goods-leavel">
            <image class="level-img" :src="item.rule_img"></image>
          </view>
          <view class="number-number">
            <text class="">{{ item.leftover }}/{{ item.num }}</text>
          </view>
          <!-- <view class="random-give">
						<text class="">1-100发内随机送出</text>
					</view> -->
          <uni-notice-bar
            v-if="item.stage_end > 0"
            class="random-give"
            :speed="10"
            color="#fff"
            style="font-size: 16rpx"
            background-color="rgba(0,0,0,0.3)"
            scrollable
            :text="item.stage_start + '-' + item.stage_end + '发内随机送出'"
          />

          <uni-notice-bar
            v-if="item.rule_name == '全局'"
            class="random-give"
            :speed="10"
            color="#fff"
            style="font-size: 16rpx"
            background-color="rgba(0,0,0,0.3)"
            scrollable
            text="奖池开完后从所有随机抽取一个"
          />

          <uni-notice-bar
            v-if="item.rule_name == '冲冲'"
            class="random-give"
            :speed="10"
            color="#fff"
            style="font-size: 16rpx"
            background-color="rgba(0,0,0,0.3)"
            scrollable
            text="件数最多且最早的获得"
          />

          <!-- start //已送出图标 -->
          <view class="send" v-if="item.leftover === 0">
            <image
              src="https://ojqn.wm2177.com/wechat_imgs/kapai-test/tianxuan/send.png"
            ></image>
          </view>
          <!-- end -->
        </view>
      </view>
      <scroll-view
        scroll-y="true"
        @scrolltolower="prizeLower"
        class="open-deail"
        v-if="current === 1"
      >
        <template v-for="item in openRewardList">
          <view class="detail-list">
            <view class="userimg">
              <image :src="item.himg" />
            </view>
            <view class="username">
              <text class="">{{ item.nickname }}</text>
              <text class="time">{{ parseTime(item.add_time) }}</text>
            </view>
            <view class="goodsimg">
              <view class="Leavel">
                <image :src="item.rule_img"></image>
              </view>
              <view class="leavel-goods">
                <image :src="item.img"> </image>
              </view>
            </view>
          </view>
        </template>
      </scroll-view>
      <scroll-view
        scroll-y="true"
        @scrolltolower="chongchongLower"
        class="open-deail chongchong-list"
        v-if="current === 2"
      >
        <view
          class="chongchong-item"
          v-for="(item, index) in ccRewardList"
          :key="cc + item.user_id"
        >
          <view class="userimg">
            <image :src="item.himg"></image>
          </view>
          <view class="username">
            <text class="">{{ item.nickname.substring(0, 2) }}</text>
          </view>
          <view class="goodsnumber">
            <text class="">{{ item.buy_num + '发' }}</text>
          </view>
        </view>
      </scroll-view>
    </view>
    <!-- 底部 -->
    <view class="select-num-btn">
      <view class="select-one" @click="payPOP(1)">
        <image
          src="https://ojqn.wm2177.com/wechat_imgs/kapai-test/tianxuan/one.png"
          class=""
        ></image>
      </view>
      <view
        class="select-one"
        @click="payPOP(3)"
        v-if="blindboxDetail.box.pattern == 2"
      >
        <image
          src="https://ojqn.wm2177.com/wechat_imgs/kapai-test/tianxuan/three.png"
          class=""
        ></image>
      </view>
      <view
        class="select-one"
        @click="payPOP(5)"
        v-if="blindboxDetail.box.pattern == 2"
      >
        <image
          src="https://ojqn.wm2177.com/wechat_imgs/kapai-test/tianxuan/five.png"
          class=""
        ></image>
      </view>
    </view>
    <!-- 换箱弹出层 -->
    <uni-popup ref="boxpopup" type="bottom">
      <view class="boxpopup">
        <view class="popup-close" @click="closepop">
          <image
            src="https://ojqn.wm2177.com/wechat_imgs/kapai-test/tianxuan/popup-close.png"
          ></image>
        </view>
        <view class="pop-title">选取箱子</view>
        <view class="box-now">
          <text>当前第</text>
          <text style="color: #7948ea">{{ currentBoxName }}</text>
          <text>/{{ boxCount }}</text>
        </view>
        <scroll-view :scroll-x="true" style="width: 730rpx; background: #fff">
          <view class="box-list" :style="{ width: `${totalBoxPage * 168}rpx` }">
            <template v-for="item in boxGroup">
              <view
                class="box-select"
                :style="
                  choosenow == item.index
                    ? 'border: 2rpx solid #A882FF;background: #F1EBFF;'
                    : ''
                "
                @click="switchbox(item.index)"
              >
                <text>{{ item.name }}</text>
              </view>
            </template>
          </view>
        </scroll-view>
        <scroll-view :scroll-y="true" style="height: 660rpx" class="box-num">
          <view
            class="boxone"
            v-for="item in boxchangeList"
            @click="changeTheBox(item)"
          >
            <view class="box-left">
              <image
                v-if="item.name == currentBoxName"
                class="chooseImg"
                src="https://ojqn.wm2177.com/wechat_imgs/kapai-test/tianxuan/box.png"
              />
              <text>第</text
              ><text style="font-size: 50rpx">{{ item.name }}</text
              ><text>箱</text>
            </view>
            <scroll-view scroll-x="true" style="width: 440rpx">
              <view
                class="box-right"
                :style="{
                  width: `${(item.goods_info.length / 2 + 1) * 100}rpx`,
                }"
              >
                <template v-for="good in item.goods_info">
                  <view
                    class="Leavel-list"
                    v-if="showBoxRule.includes(good.rule_name)"
                  >
                    <view class="level-img">
                      <image :src="good.rule_img" />
                    </view>
                    <view class="leavel-num">
                      <text>{{ good.sum_leftover }}/{{ good.sum_num }}</text>
                    </view>
                  </view>
                </template>
              </view>
            </scroll-view>
            <view v-if="item.leftover < 1" class="box-chooseimg"
              ><text>已售罄</text></view
            >
          </view>
        </scroll-view>
      </view>
    </uni-popup>

    <!-- 赏品详情弹窗 -->
    <uni-popup ref="detailpopup" type="center">
      <view class="goods-pop">
        <view class="popup-star">
          <image
            src="https://ojqn.wm2177.com/wechat_imgs/kapai-test/tianxuan/popup-star.png"
          ></image>
        </view>
        <view class="popup-close" @click="closePopup">
          <image
            src="https://ojqn.wm2177.com/wechat_imgs/kapai-test/tianxuan/popup-close.png"
          ></image>
        </view>
        <view class="popup-title">
          <text>详情</text>
        </view>
        <view class="popup-img">
          <image :src="goodsDetail ? goodsDetail.img : ''"></image>
        </view>
        <view class="goods-detail">
          <view class="goods-name">
            <text>{{ goodsDetail ? goodsDetail.goods_name : '' }}</text>
          </view>
          <view class="goods-specs">
            <view class="specs" v-if="probability != 0">
              <text class="">概率:</text>
              <text class="">{{ probability }}%</text>
            </view>
            <view class="specs">
              <text class="">参考价:</text>
              <text class="">{{
                goodsDetail && blindboxDetail.box
                  ? Math.max(goodsDetail.price, blindboxDetail.box.price)
                  : ''
              }}</text>
            </view>
            <view class="state">
              <text class="">状态:</text>
              <text class="">{{
                goodsDetail
                  ? goodsDetail.goods_type == 1
                    ? '预售'
                    : '现货'
                  : ''
              }}</text>
            </view>
          </view>
        </view>
      </view>
    </uni-popup>
    <!-- 支付弹窗 -->
    <uni-popup ref="paypopup" type="bottom">
      <view class="order-pop">
        <view class="popup-close" @click="closeOrder">
          <image
            src="https://ojqn.wm2177.com/wechat_imgs/kapai-test/tianxuan/popup-close.png"
          ></image>
        </view>
        <view class="popup-title">
          <text>确认订单</text>
        </view>
        <view class="order-top">
          <view class="left-img">
            <image :src="boxInfo.img"></image>
          </view>
          <view class="right-tit">
            <view class="title">
              <text>{{ boxInfo.name }}</text>
            </view>
            <view class="tit-mid">
              <text>不支持七天无理由退货·无法回收</text>
            </view>
            <view class="tit-num">
              <text>购买数量</text>
              <text style="color: #7948ea; margin-left: 50rpx"
                >{{ buyCount }}次</text
              >
            </view>
          </view>
        </view>
        <view class="select-coupon" @click="chooseCoupon">
          <view class="coupon-left">
            <text class="">选择优惠券</text>
          </view>
          <view class="coupon-right">
            <text style="margin-right: 15rpx"></text>
            <text>{{ couponname }}></text>
          </view>
        </view>
        <!-- 虚线 -->
        <view class="popup-line"></view>
        <view class="payment-tit">
          <text>支付方式</text>
        </view>
        <view class="payment-list">
          <!-- 微信 -->
          <!-- <view class="wechat">
						<view class="wechat-left">
							<view class="wechat-img">
								<image src="https://ojqn.wm2177.com/wechat_imgs/kapai-test/tianxuan/pop-wechat.png"></image>
							</view>
							<view class="wechat-tit">
								<text >微信支付</text>
							</view>
						</view>
						<view class="wechat-right">
							<view class="wechat-money">
								<text >￥90.00</text>
							</view>
							<view class="select-icon">
								<image src="https://ojqn.wm2177.com/wechat_imgs/kapai-test/tianxuan/select-icon.png"></image>
							</view>
						</view>
					</view> -->
          <!-- 虚线 -->
          <!-- <view class="popup-line"></view> -->
          <!-- 卡尘 -->
          <view class="wechat">
            <view class="wechat-left">
              <view class="wechat-img">
                <image
                  style="width: 64rpx; height: 78rpx"
                  src="https://ojqn.wm2177.com/wechat_imgs/kapai-test/tianxuan/pop-kachen.png"
                ></image>
              </view>
              <view class="wechat-tit">
                <text>卡尘支付</text>
              </view>
            </view>
            <view class="wechat-right">
              <view class="wechat-money">
                <text></text>
              </view>
              <view class="select-icon">
                <image
                  src="https://ojqn.wm2177.com/wechat_imgs/kapai-test/tianxuan/select-icon.png"
                ></image>
              </view>
            </view>
          </view>
          <!-- 虚线 -->
          <view class="popup-line"></view>
          <!-- //支付宝 -->
          <!-- <view class="wechat">
						<view class="wechat-left">
							<view class="wechat-img">
								<image  style="width: 56rpx ;height: 56rpx;"src="https://ojqn.wm2177.com/wechat_imgs/kapai-test/tianxuan/pop-alipay.png"></image>
							</view>
							<view class="wechat-tit">
								<text >支付宝支付</text>
							</view>
						</view>
						<view class="wechat-right">
							<view class="wechat-money">
								<text ></text>
							</view>
							<view class="select-icon">
								<image src="https://ojqn.wm2177.com/wechat_imgs/kapai-test/tianxuan/select-icon.png"></image>
							</view>
						</view>
					</view> -->

          <view class="underage">
            <text>未成年人禁止购买</text>
          </view>
          <view class="pay-button" @click="paytxDrawMoney">
            <image
              src="https://ojqn.wm2177.com/wechat_imgs/kapai-test/tianxuan/pay-button.png"
            ></image>
          </view>

          <view class="pay-agree">
            <radio
              style="transform: scale(0.8)"
              value="r1"
              :checked="agree"
            />本人已满18岁，已阅读并同意<text style="color: #7948ea"
              >《天选之人使用协议》</text
            >
          </view>
        </view>
      </view>
    </uni-popup>

    <!-- //单抽 -->
    <uni-popup ref="drawOne" type="center">
      <view class="draw">
        <view class="draw-title">
          <image
            src="https://ojqn.wm2177.com/wechat_imgs/kapai-test/lucky-box/reward.png"
          ></image>
        </view>
        <template v-if="haveDraw.length === 1">
          <view class="goods-img">
            <image :src="haveDraw[0].img"></image>
            <view class="goods-leavel">
              <image :src="haveDraw[0].rule_img"></image>
            </view>
          </view>
        </template>
        <!-- //按钮 -->
        <view class="get-btn" @click="closeOneDraw">
          <image
            src="https://ojqn.wm2177.com/wechat_imgs/kapai-test/lucky-box/get-goods.png"
          ></image>
        </view>
      </view>
    </uni-popup>

    <!-- //三抽 -->
    <uni-popup ref="drawThree" type="center">
      <view class="draw">
        <view class="draw-title">
          <image
            src="https://ojqn.wm2177.com/wechat_imgs/kapai-test/lucky-box/reward.png"
          ></image>
        </view>
        <template v-if="haveDraw.length === 3">
          <view class="three-top">
            <image :src="haveDraw[0].img"></image>
            <view class="goods-leavel">
              <image :src="haveDraw[0].rule_img"></image>
            </view>
          </view>
          <view class="three-top three-left">
            <image :src="haveDraw[1].img"></image>
            <view class="goods-leavel">
              <image :src="haveDraw[1].rule_img"></image>
            </view>
          </view>
          <view class="three-top three-right">
            <image :src="haveDraw[2].img"></image>
            <view class="goods-leavel">
              <image :src="haveDraw[2].rule_img"></image>
            </view>
          </view>
        </template>

        <!-- //按钮 -->
        <view class="get-btn three-btn" @click="closeThreeDraw">
          <image
            src="https://ojqn.wm2177.com/wechat_imgs/kapai-test/lucky-box/get-goods.png"
          ></image>
        </view>
      </view>
    </uni-popup>

    <!-- //五抽 -->
    <uni-popup ref="drawFive" type="center">
      <view class="draw">
        <view class="draw-title">
          <image
            src="https://ojqn.wm2177.com/wechat_imgs/kapai-test/lucky-box/reward.png"
          ></image>
        </view>
        <template v-if="haveDraw.length === 5">
          <view class="five-top">
            <image :src="haveDraw[0].img"></image>
            <view class="goods-leavel">
              <image :src="haveDraw[0].rule_img"></image>
            </view>
          </view>
          <view class="five-top top-right">
            <image :src="haveDraw[1].img"></image>
            <view class="goods-leavel">
              <image :src="haveDraw[1].rule_img"></image>
            </view>
          </view>

          <view class="five-top down-left">
            <image :src="haveDraw[2].img"></image>
            <view class="goods-leavel">
              <image :src="haveDraw[2].rule_img"></image>
            </view>
          </view>
          <view class="five-top down-mid">
            <image :src="haveDraw[3].img"></image>
            <view class="goods-leavel">
              <image :src="haveDraw[3].rule_img"></image>
            </view>
          </view>
          <view class="five-top down-right">
            <image :src="haveDraw[4].img"></image>
            <view class="goods-leavel">
              <image :src="haveDraw[4].rule_img"></image>
            </view>
          </view>
        </template>
        <!-- //按钮 -->
        <view class="get-btn three-btn" @click="closeFiveDraw">
          <image
            src="https://ojqn.wm2177.com/wechat_imgs/kapai-test/lucky-box/get-goods.png"
          ></image>
        </view>
      </view>
    </uni-popup>

    <!-- 刷新 -->
    <view class="refresh" @click="refresh">
      <image
        src="https://ojqn.wm2177.com/wechat_imgs/kapai-test/tianxuan/refresh.png"
      ></image>
    </view>
  </view>
</template>

<script setup>
  import { onMounted, ref } from 'vue'
  import { onLoad, onShow, onShareAppMessage } from '@dcloudio/uni-app'
  import { http } from '@/utils/http.js'
  import { parseTime } from '@/utils/index.js'
  import { useUsercodeStore } from '@/store/usercode.js'

  const swithTab = (e) => {
    if (current.value != e) {
      current.value = e
    } else {
      return
    }
    if (e == 1) {
      prizePage.value = 1
      prizeFlag.value = true
      openRewardList.value = []
      openReward()
    } else if (e == 2) {
      ccPage.value = 1
      ccFlag.value = true
      ccRewardList.value = []
      ccReward()
    } else {
      openRewardList.value = []
      ccRewardList.value = []
    }
  }

  const userCodeStore = useUsercodeStore()

  const showBoxRule2 = ref(['SP1', 'SP2', 'SP3', 'SP4', 'SP5', 'A'])
  const showBoxRule = ref(['天选', 'SP1', 'SP2', 'SP3', 'SP4', 'SP5', 'A'])
  const blindboxId = ref()
  const blindboxDetail = ref()
  const boxInfo = ref()
  const caseId = ref(0)
  // 优惠券id
  const couponId = ref(0)
  const couponname = ref('')
  const couponType = ref(-1)

  const probality = ref('')
  //tab数据
  const items = ref(['奖池预览', '开赏记录'])
  const current = ref(0)
  const showcc = ref(false)
  const probabilityMap = ref({})
  // 盲盒详情
  async function getblindboxDetail() {
    const res = await http.request({
      url: '/api/box/boxDetails',
      method: 'POST',
      data: {
        id: blindboxId.value,
        case_id: caseId.value,
      },
    })
    console.log(res)
    blindboxDetail.value = res.data
    boxInfo.value = res.data.box
    caseId.value = res.data.case_info.id
    const keys = ref([])
    blindboxDetail.value.box.probability_show.forEach((item) => {
      keys.value.push(`${Object.keys(item)}:${item[Object.keys(item)]}%`)
      probabilityMap.value[Object.keys(item)] = item[Object.keys(item)]
    })
    probality.value = '实时概率为：' + keys.value.join('，')
    console.log(probality.value)
    if (res.data.box.is_cc == 1) {
      showcc.value = true
    }
  }

  //去我的奖品
  function toMyReward() {
    uni.switchTab({
      url: '/pages/bag/index',
    })
  }
  // 开赏记录
  const prizePage = ref(1)
  const openRewardList = ref([])
  const prizeFlag = ref(true)
  async function openReward() {
    if (
      blindboxDetail.value.case_info.leftover ==
      blindboxDetail.value.case_info.sum
    ) {
      return
    }
    ccRewardList.value = []
    if (prizeFlag.value) {
      const res = await http.request({
        url: '/api/box/winLog_heaven',
        method: 'POST',
        data: {
          page: prizePage.value,
          limit: 10,
          id: blindboxId.value,
          case_id: caseId.value,
        },
      })
      if (res.data.length == 0) {
        uni.utils.toast('已经没有记录了~')
        prizeFlag.value = false
        --prizePage.value
        return
      }
      console.log(res.data)
      openRewardList.value = [...openRewardList.value, ...res.data]
    } else {
      // uni.utils.toast('已经没有记录了~')
      return
    }
  }

  function prizeLower() {
    ++prizePage.value
    openReward()
  }
  // 冲冲赏排行榜
  const ccRewardList = ref([])
  const ccPage = ref(1)
  const ccFlag = ref(true)
  async function ccReward() {
    if (
      blindboxDetail.value.case_info.leftover ==
      blindboxDetail.value.case_info.sum
    ) {
      return
    }
    openRewardList.value = []
    if (ccFlag.value) {
      const res = await http.request({
        url: '/api/box/ccRanking',
        method: 'POST',
        data: {
          page: ccPage.value,
          limit: 10,
          id: blindboxId.value,
          case_id: caseId.value,
        },
      })
      console.log(res)
      if (res.data.length == 0) {
        uni.utils.toast('已经没有记录了~')
        ccFlag.value = false
        --ccPage.value
        return
      }
      ccRewardList.value = [...ccRewardList.value, ...res.data]
    } else {
      uni.utils.toast('已经没有记录了~')
      return
    }
  }

  function chongchongLower() {
    ++ccPage.value
    ccReward()
  }

  // 上一箱下一箱
  function prevent() {
    current.value = 0
    const boxindex = ref(0)
    console.log(blindboxDetail.value.case_info.id)
    boxchangeList.value.forEach(async (item, index) => {
      if (blindboxDetail.value.case_info.id == item.id) {
        if (index == 0) {
          if (choosenow.value == 1) {
            uni.utils.toast('已经是第一个了~')
            return
          } else {
            --choosenow.value
            await getboxList()
            let chage = JSON.parse(JSON.stringify(boxchangeList.value))
            caseId.value = chage[chage.length - 1].id
            getblindboxDetail()
          }
        } else {
          if (index != 0) {
            boxindex.value = --index
          } else {
            boxindex.value = 0
          }
          caseId.value = JSON.parse(JSON.stringify(boxchangeList.value))[
            boxindex.value
          ].id
          getblindboxDetail()
        }
      }
    })
  }

  function next() {
    current.value = 0
    const boxindex = ref(0)
    if (JSON.parse(JSON.stringify(boxchangeList.value)).length == 0) {
      uni.utils.toast('已经是最后一个了~')
    }
    boxchangeList.value.forEach(async (item, index) => {
      if (blindboxDetail.value.case_info.id == item.id) {
        if (
          index ==
          JSON.parse(JSON.stringify(boxchangeList.value)).length - 1
        ) {
          ++choosenow.value
          await getboxList()
          console.log(boxchangeList.value.length)
          if (boxchangeList.value.length == 0) {
            uni.utils.toast('已经是最后一个了~')
            --choosenow.value
            return
          } else {
            boxindex.value = 0
            caseId.value = JSON.parse(JSON.stringify(boxchangeList.value))[
              boxindex.value
            ].id
            getblindboxDetail()
          }
        } else {
          boxindex.value = ++index
          caseId.value = JSON.parse(JSON.stringify(boxchangeList.value))[
            boxindex.value
          ].id
          getblindboxDetail()
        }
      }
    })
  }

  function onClickItem(e) {
    if (current.value != e.currentIndex) {
      current.value = e.currentIndex
    } else {
      return
    }
    if (e.currentIndex == 1) {
      prizePage.value = 1
      prizeFlag.value = true
      openRewardList.value = []
      openReward()
    } else if (e.currentIndex == 2) {
      ccPage.value = 1
      ccFlag.value = true
      ccRewardList.value = []
      ccReward()
    } else {
      openRewardList.value = []
      ccRewardList.value = []
    }
    console.log(e.currentIndex)
  }

  // 查看奖品详情
  const showmask = ref(false)
  const maskindex = ref(0)
  function goodsinfo(index) {
    showmask.value = true
    maskindex.value = index
  }
  // 关闭mask
  function closeMask() {
    showmask.value = false
  }

  // 换箱
  const boxpopup = ref()
  const boxchangeList = ref([])
  const totalBoxPage = ref(1)
  const boxGroup = ref([])
  const boxCount = ref(0)
  const currentBoxName = ref(1)
  async function getboxList() {
    const res = await http.request({
      url: '/api/box/getCase',
      method: 'POST',
      data: {
        page: choosenow.value,
        limit: 20,
        id: blindboxId.value,
      },
    })
    console.log(res)
    boxchangeList.value = res.data
    totalBoxPage.value = res.maxPage
    boxGroup.value = []
    boxCount.value = res.count
    for (var i = 0; i < totalBoxPage.value; i++) {
      let groupInfo = {}
      groupInfo.index = i + 1
      groupInfo.name = `${i * 20 + 1}-${i * 20 + 20}箱`
      boxGroup.value.push(groupInfo)
    }
  }
  const choosenow = ref(1)
  async function changebox() {
    await getboxList()
    boxpopup.value.open('bottom')
  }
  function closepop() {
    boxpopup.value.close()
  }
  function switchbox(index) {
    choosenow.value = index
    getboxList()
  }
  // 选择箱子
  function changeTheBox(item) {
    current.value = 0
    caseId.value = item.id
    currentBoxName.value = item.name
    ccRewardList.value = []
    openRewardList.value = []
    getblindboxDetail()
    boxpopup.value.close()
  }

  // 规则
  const ruleStrings = ref('')
  async function getRules(id) {
    const res = await http.request({
      url: '/api/index/getDetails',
      method: 'POST',
      data: {
        id: id,
      },
    })
    console.log(res)
    ruleStrings.value = res.data.details
  }

  // 规则
  const rulepopup = ref()
  async function rulePOP() {
    await getRules(7)
    rulepopup.value.open('bottom')
  }

  // 支付
  const paypopup = ref()
  // 没有优惠券的价格
  const paymoney = ref()
  const buyCount = ref(0)
  //有优惠券的jiage
  const realmoney = ref()
  const agree = ref(true)
  async function payPOP(count) {
    if (
      userCodeStore.usercode.token == '' ||
      userCodeStore.usercode.userId == ''
    ) {
      uni.utils.toast('为了让您有更好的体验，请先登录')
      setTimeout(() => {
        uni.navigateTo({
          url: `/pages/login/login`,
        })
      }, 2000)
      return
    }
    // if (
    // 	userCodeStore.usercode.isAddress == 0 &&
    // 	userCodeStore.usercode.token != ''
    // ) {
    // 	uni.utils.toast('为了让您有更好的体验，请先完善物流信息')
    // 	setTimeout(() => {
    // 		uni.navigateTo({
    // 			url: `/minePage/editaddress/index`,
    // 		})
    // 	}, 2000)
    // 	return
    // }
    await getUserMoney()
    paypopup.value.open('bottom')
    paymoney.value = (blindboxDetail.value.box.price * count).toFixed(2)
    // 每次点击重新选择优惠券
    realmoney.value = paymoney.value
    couponId.value = 0
    couponname.value = ''
    buyCount.value = count
  }
  function changeAgree() {
    agree.value = !agree.value
  }
  //支付radio
  const currentradio = ref(3)
  function radioChange(evt) {
    currentradio.value = evt.detail.value
  }
  // 天选抽卡
  // 卡尘支付
  const haveDraw = ref([])
  async function paytxDrawMoney() {
    const res = await http.request({
      url: '/api/boxorder/createBoxOrder_heaven',
      method: 'POST',
      data: {
        id: blindboxId.value,
        sorce: 1,
        num: Number(buyCount.value),
        pay_type: currentradio.value,
        coupon_id: couponId.value,
        case_id: caseId.value,
        money: paymoney.value,
      },
    })
    console.log(res)
    if (res.st == 1) {
      paypopup.value.close()
      haveDraw.value = res.data.box_goods
      if (haveDraw.value.length == 5) {
        drawFive.value.open('top')
      }
      if (haveDraw.value.length == 3) {
        drawThree.value.open('top')
      }
      if (haveDraw.value.length == 1) {
        drawOne.value.open('top')
      }
      // uni.navigateTo({
      // 	url: `/drawPage/txDrawCards/index?thecard=${encodeURIComponent(
      // 		JSON.stringify(haveDraw.value)
      // 	)}&num=${buyCount.value}&id=${blindboxId.value}&pay_type=${
      // 		currentradio.value
      // 	}&case_id=${caseId.value}&money=${paymoney.value}&img=${
      // 		blindboxDetail.value.box.img
      // 	}&name=${blindboxDetail.value.box.name}&couponid=${
      // 		couponId.value
      // 	}`,
      // })
    } else if (res.st == -2) {
      namepopup.value.open('center')
    } else {
      uni.utils.toast(res.msg)
    }
  }

  // 获取订单id
  function goRealName() {
    namepopup.value.close('center')
    uni.navigateTo({
      url: '/minePage/authentication/index',
    })
  }
  const namepopup = ref()
  const orderId = ref()
  async function getId() {
    const res = await http.request({
      url: '/api/boxorder/createBoxOrder_heaven',
      method: 'POST',
      data: {
        id: blindboxId.value,
        sorce: 1,
        num: Number(buyCount.value),
        pay_type: currentradio.value,
        coupon_id: couponId.value,
        case_id: caseId.value,
        money: paymoney.value,
      },
    })
    console.log(res)
    if (res.st == 1) {
      orderId.value = res.data
    } else if (res.st == -2) {
      namepopup.value.open('center')
    } else {
      couponId.value = 0
      couponname.value = ''
      uni.utils.toast(res.msg)
    }
  }
  // 微信支付
  //轮询微信支付订单状态
  const timeStatu = ref(true)
  async function askWxOrder() {
    setTimeout(() => {
      timeStatu.value = false
    }, 5000)
    const res = await http.request({
      url: '/api/boxorder/getPayInfo',
      method: 'POST',
      data: {
        id: orderId.value,
        type: 1,
      },
    })
    console.log(res)
    if (res.st == 1) {
      if (res.data.status == 1) {
        haveDraw.value = res.data.box_goods
        uni.navigateTo({
          url: `/drawPage/txDrawCards/index?thecard=${encodeURIComponent(
            JSON.stringify(haveDraw.value)
          )}&num=${buyCount.value}&id=${blindboxId.value}&pay_type=${
            currentradio.value
          }&case_id=${caseId.value}&money=${paymoney.value}&img=${
            blindboxDetail.value.box.img
          }&name=${blindboxDetail.value.box.name}&couponid=${couponId.value}`,
        })
        userCodeStore.setIsTrans(1)
        paypopup.value.close()
      } else {
        uni.utils.toast(res.data.msg)
      }
    } else {
      if (timeStatu.value) {
        askWxOrder()
      } else {
        uni.utils.toast(res.msg)
      }
    }
    paying.value = 1
  }

  const paying = ref(1)
  async function payWXDraw() {
    timeStatu.value = true
    await getId()
    if (!orderId.value) {
      return
    }
    const res = await http.request({
      url: '/api/adapay/adapay/adaPayOrder',
      method: 'POST',
      data: {
        id: orderId.value,
        type: 2,
        preferential: preferential.value,
      },
    })
    console.log(res)
    if (res.st == 1) {
      uni.navigateToMiniProgram({
        appId: res.data.expend.wx_app_id,
        path: res.data.expend.path,
        extraData: {},
        success(res) {
          // 打开成功
          paying.value = 2
        },
      })
    } else {
      uni.utils.toast('拉起支付失败，请联系客服~')
    }
  }

  //微信官方支付
  // async function payWXDraw() {
  // 	timeStatu.value = true
  // 	await getId()
  // 	if (!orderId.value) {
  // 		return
  // 	}
  // 	const res = await http.request({
  // 		url: '/api/boxorder/boxWechatPay',
  // 		method: 'POST',
  // 		data: {
  // 			id: orderId.value,
  // 		},
  // 	})
  // 	console.log(res)
  // 	if (res.st == 1) {
  // 		uni.requestPayment({
  // 			provider: 'wxpay',
  // 			timeStamp: res.data.timeStamp, // 时间戳（单位：秒）
  // 			nonceStr: res.data.nonceStr, // 随机字符串
  // 			package: res.data.package, // 固定值
  // 			signType: res.data.signType,
  // 			paySign: res.data.paySign, // 签名，这里用的 MD5 签名
  // 			success: function (res) {
  // 				console.log('success:' + JSON.stringify(res))
  // 				if (res.errMsg == 'requestPayment:ok') {
  // 					setTimeout(() => {
  // 						console.log('zhe')
  // 						timeStatu.value = false
  // 					}, 5000)
  // 					askWxOrder()
  // 				}
  // 			},
  // 			fail: function (err) {
  // 				uni.utils.toast('支付失败')
  // 				// console.log('fail:' + JSON.stringify(err))
  // 			},
  // 		})
  // 	} else {
  // 		uni.utils.toast(res.msg)
  // 	}
  // }

  //跳转天选抽卡
  async function goDrawCards() {
    if (!agree.value) {
      uni.utils.toast('请先同意用户协议')
      return
    }
    //卡尘支付
    if (currentradio.value == 3) {
      if (Number(balance.value) < Number(realmoney.value)) {
        uni.utils.toast('卡尘不足')
        return
      }
      paytxDrawMoney()
      paypopup.value.close()
      // 微信支付
    } else if (currentradio.value == 1) {
      payWXDraw()
    }
  }

  // 用户信息卡尘(暂时)
  const preferential = ref()
  const balance = ref(0)
  async function getUserMoney() {
    const res = await http.request({
      url: '/api/user/userMsg',
      method: 'POST',
      data: {},
    })
    console.log('user')
    console.log(res)
    balance.value = res.data.data.balance
    preferential.value = res.data.preferential
  }

  // 选择优惠券
  function chooseCoupon() {
    uni.navigateTo({
      url: `/drawPage/choosecoupon/index?money=${paymoney.value}&id=${blindboxId.value}&couponid=${couponId.value}`,
    })
  }

  const showGuide = ref(true)
  const guideBG = ref('')
  const guideId = ref([1, 2, 3, 4, 5, 6, 7, 8, 9])
  const guideList = ref([])
  async function getGuideBG() {
    const res = await http.request({
      url: '/api/index/getGuidance',
      method: 'POST',
      data: {
        id: guideId.value,
      },
    })
    console.log(res)
    guideList.value = res.data
    guideBG.value = res.data[0].img
  }

  const guideIndex = ref(0)
  function nextGuide() {
    ++guideIndex.value
    console.log(guideIndex.value)
    if (guideIndex.value > 8) {
      showGuide.value = false
      userCodeStore.setFirstTX(1)
      return
    }
    guideBG.value = guideList.value[guideIndex.value].img
  }

  const x = ref(10000)
  const y = ref(300)
  const refreshFlag = ref(true)

  function refresh() {
    console.log('zou')
    if (refreshFlag.value) {
      refreshFlag.value = false
      setTimeout(() => {
        refreshFlag.value = true
      }, 10000)
      if (current.value == 1) {
        prizePage.value = 1
        prizeFlag.value = true
        openRewardList.value = []
        openReward()
      } else if (current.value == 2) {
        ccPage.value = 1
        ccFlag.value = true
        ccRewardList.value = []
        ccReward()
      } else {
        openRewardList.value = []
        ccRewardList.value = []
        getblindboxDetail()
      }
    } else {
      uni.utils.toast('10秒内不可重复点击')
    }
  }

  function goRule(id) {
    uni.navigateTo({
      url: `/homePage/agreement/index?id=${id}`,
    })
  }

  onShareAppMessage(() => {
    return {
      title: `${blindboxDetail.value.box.name} | ${blindboxDetail.value.box.price}一抽 | 第${blindboxDetail.value.case_info.name}箱 | 奖池剩余${blindboxDetail.value.case_info.leftover}/${blindboxDetail.value.case_info.sum}`,
      path: `drawPage/txDraw/index?id=${blindboxId.value}`,
    }
  })

  onLoad((option) => {
    blindboxId.value = option.id
    if (userCodeStore.usercode.firstTX == 1) {
      showGuide.value = false
    }
    getGuideBG()
    current.value = 0
    getblindboxDetail()
    getboxList()
    getUserMoney()
  })
  onShow(() => {
    if (paying.value == 2) {
      askWxOrder()
    }
    uni.$once('thecoupon', (data) => {
      console.log(data)
      realmoney.value = paymoney.value
      if (data.coupon) {
        couponId.value = data.coupon.id
        couponname.value = data.coupon.title
        // 满减
        if (data.coupon.type == 1) {
          realmoney.value = (paymoney.value - data.coupon.money).toFixed(2)
        } else if (data.coupon.type == 2) {
          realmoney.value = (paymoney.value - data.coupon.money).toFixed(2)
        } else if (data.coupon.type == 3) {
          realmoney.value = (paymoney.value * data.coupon.discount).toFixed(2)
        }
      }
    })
  })

  const detailpopup = ref()
  const goodsDetail = ref()
  const drawOne = ref()
  const drawThree = ref()
  const drawFive = ref()
  const probability = ref(0)

  // const closeOneDraw = ref()
  // const openDrawOne = ref()
  function openDetail(item) {
    goodsDetail.value = item
    console.log('选商品', item)
    let probabilityValue = probabilityMap.value[item.rule_name]
    console.log('选商品', probabilityValue)
    if (probabilityValue == undefined) {
      probabilityValue = 0
    }
    probability.value = probabilityValue

    detailpopup.value.open('center')
  }
  function closePopup() {
    detailpopup.value.close()
  }
  // 抽
  // function openDrawOne(){
  // 	drawOne.value.open('top')
  // }
  function closeOneDraw() {
    drawOne.value.close('top')
    refresh()
  }
  //3抽
  // function openDrawOne(){
  // 	drawThree.value.open('top')
  // }
  function closeThreeDraw() {
    drawThree.value.close('top')
    refresh()
  }
  //5抽
  function openDrawOne() {
    drawFive.value.open('top')
  }
  function closeFiveDraw() {
    drawFive.value.close('top')
    refresh()
  }
</script>

<style lang="scss" scoped>
  .tianxuan-content {
    background-color: #e9eaf2;
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    .top-cover-information {
      width: 730rpx;
      height: 236rpx;
      background-color: #fff;
      display: flex;
      border-radius: 10rpx;
      margin: 10rpx auto;
      .left-cover {
        width: 55%;

        image {
          width: 384rpx;
          height: 196rpx;
          margin: 20rpx;
          border-radius: 10rpx;
        }
      }
      .right-information {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 45%;
        .box-name {
          display: flex;
          margin: 17rpx;
          font-size: 28rpx;
          // width: 100%;
          justify-content: space-between;

          .name-tit {
            -webkit-line-clamp: 1;
            white-space: nowrap;
            width: 220rpx;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          .select-btn {
            width: 74rpx;
            height: 36rpx;
            background-color: #a281eb;
            border-radius: 14rpx;
            line-height: 36rpx;
            text-align: center;
            color: #fff;
            font-size: 24rpx;
          }
        }
        .mid-level {
          width: 280rpx;
          height: 88rpx;
          border: 3rpx solid #a281eb;
          margin: 0rpx auto;
          border-radius: 10rpx;
          display: flex;
          overflow: auto;

          .Leavel-list {
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            width: 20%;
            height: 92rpx;
            margin: 0rpx 14rpx 0rpx 14rpx;
            .level-img {
              margin-top: 5rpx;
              image {
                width: 62rpx;
                height: 33rpx;
              }
            }
            .leavel-num {
              width: 70rpx;
              height: 30rpx;
              font-size: 16rpx;
              color: #a882ff;
              line-height: 30rpx;
              text-align: center;
              border: 2rpx solid #a882ff;
              // margin-top: 20rpx;
              border-radius: 6rpx;
            }
          }
        }
        .money-number {
          display: flex;
          color: #000;
          justify-content: space-between;
          margin: 20rpx;

          .money {
            font-size: 26rpx;
          }
          .number {
            font-size: 16rpx;
            line-height: 36rpx;
          }
        }
      }
    }
    .goods-preview {
      width: 730rpx;
      min-height: 80vh;
      background-color: #fff;
      border-radius: 14rpx;
      margin: 20rpx auto;
      .open-deail {
        width: 710rpx;
        height: 73vh;
        background: rgba(206, 188, 245, 0.34);
        border-radius: 16rpx;
        margin: 20rpx auto;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        padding-bottom: 140rpx;
        .chongchong-item {
          width: 680rpx;
          height: 100rpx;
          background: rgba(180, 148, 255, 0.53);
          border: 2rpx solid rgba(159, 122, 245, 1);
          border-radius: 13px;
          margin: 20rpx auto;
          display: flex;
          justify-content: space-between;
          .userimg {
            width: 100rpx;
            height: 100rpx;
            display: flex;
            align-items: center;
            margin-left: 20rpx;
            image {
              width: 72rpx;
              height: 72rpx;
              border-radius: 80rpx;
            }
          }
          .username {
            font-size: 30rpx;
            color: #000;
            line-height: 100rpx;
            // text-align: center;
            width: 60%;
          }
          .goodsnumber {
            font-size: 30rpx;
            color: #000;
            line-height: 100rpx;
            // text-align: center;
            margin-right: 30rpx;
          }
        }

        .detail-list {
          width: 680rpx;
          height: 152rpx;
          background: #fff;
          color: #000;
          border-radius: 14rpx;
          margin: 20rpx auto;
          display: flex;
          justify-content: space-between;

          .userimg {
            width: 152rpx;
            height: 152rpx;
            display: flex;

            image {
              width: 112rpx;
              height: 112rpx;
              border-radius: 80rpx;
              margin: auto;
            }
          }

          .username {
            font-size: 30rpx;
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;
            width: 40%;

            .time {
              font-size: 24rpx;
              color: #a885f2;
            }
          }

          .goodsimg {
            display: flex;
            // margin: auto;
            // width: 20%;
            align-items: center;

            .Leavel {
              // width: 36rpx;
              // height: 80rpx;
              margin-right: 30rpx;

              image {
                width: 70rpx;
                height: 40rpx;
              }
            }

            .leavel-goods {
              width: 84rpx;
              height: 116rpx;
              margin-right: 20rpx;

              image {
                width: 84rpx;
                height: 116rpx;
              }
            }
          }
        }
      }
      .goods-lable {
        display: flex;
        justify-content: space-between;
        margin-top: 20rpx;
        .last-select {
          background: url(https://ojqn.wm2177.com/wechat_imgs/kapai-test/tianxuan/last-select.png)
            no-repeat;
          background-size: 100%;
          width: 108rpx;
          height: 44rpx;

          .last-name {
            font-size: 22rpx;
            color: #7948ea;
            align-items: center;
            margin-left: 15rpx;
            line-height: 44rpx;
          }
          .next-name {
            font-size: 22rpx;
            color: #7948ea;
            align-items: center;
            line-height: 44rpx;
            margin-left: 23rpx;
          }
        }
        .all-goods {
          font-size: 28rpx;
          color: #a6a6a6;
          font-weight: 600;
          line-height: 44rpx;
          text-align: center;
          display: flex;
          width: 50%;
          justify-content: space-between;
          .borderBottom {
            border-bottom: 6rpx solid #9f7af5;
          }
        }
        .next-select {
          background: url(https://ojqn.wm2177.com/wechat_imgs/kapai-test/tianxuan/next-select.png)
            no-repeat;
          background-size: 100%;
          width: 108rpx;
          height: 44rpx;
        }
      }
      .all-goods-list {
        display: flex;
        margin: 9rpx;
        overflow: scroll;
        flex-wrap: wrap;
        padding-bottom: 200rpx;
        .tianxuan-goods {
          background: url(https://ojqn.wm2177.com/wechat_imgs/kapai-test/tianxuan/goods-background-img.png)
            no-repeat;
          background-size: 100%;
          width: 158rpx;
          height: 218rpx;
          justify-content: space-evenly;
          position: relative;
          margin: 10rpx;
          .tianxuan-goods-img {
            width: 116rpx;
            height: 162rpx;
            text-align: center;
            margin: 0rpx auto;
            margin-top: 20rpx;
            image {
              width: 116rpx;
              height: 162rpx;
            }
          }
          .goods-number {
            font-size: 16rpx;
            color: #7948ea;
            margin: 10rpx;
            text-align: center;
            font-weight: 600;
            -webkit-line-clamp: 1;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;

            .about-level {
              // background-clip: text;
              // // -webkit-text-stroke: 4rpx #8F68E8;
              // -webkit-background-clip: text;
              // -webkit-text-fill-color: transparent; /*需要文字透明*/
            }
          }
          .goods-leavel {
            position: absolute;
            left: 3rpx;
            top: -4rpx;
            .level-img {
              width: 70rpx;
              height: 40rpx;
              image {
                width: 100%;
                height: 40rpx;
              }
            }
          }
          .number-number {
            position: absolute;
            width: 68rpx;
            height: 30rpx;
            font-size: 16rpx;
            line-height: 30rpx;
            text-align: center;
            color: #fff;
            top: 3rpx;
            right: 3rpx;
            // border: 2rpx solid #8652FF;
            background-color: #7948ea;
            border-radius: 5rpx;
          }
          .random-give {
            position: absolute;
            width: 158rpx;
            height: 30rpx;
            font-size: 16rpx;
            line-height: 30rpx;
            text-align: center;
            color: #fff;
            top: 150rpx;
            right: 0rpx;
            // border: 2rpx solid #8652FF;
            // background-color:#7948EA ;
            border-radius: 5rpx;
          }
          .send {
            position: absolute;
            top: 40%;
            left: 20%;
            image {
              width: 100rpx;
              height: 48rpx;
            }
          }
        }
      }
    }
    .select-num-btn {
      width: 100%;
      height: 148rpx;
      background-color: #fff;
      display: flex;
      position: fixed;
      bottom: 0rpx;
      justify-content: space-between;
      box-shadow: 0px -2px 4px rgba(0, 0, 0, 0.09);
      .select-one {
        margin: 20rpx auto;
        image {
          width: 172rpx;
          height: 92rpx;
        }
      }
    }
    .boxpopup {
      width: 730rpx;
      height: 900rpx;
      background-color: #ebe5f8;
      border-radius: 26rpx 26rpx 0rpx 0rpx;
      box-shadow: 0px 4rpx 8rpx rgba(115, 53, 53, 0.25);
      position: relative;
      border: 6rpx solid #740b00;
      margin: auto;
      .popup-close {
        position: absolute;
        top: 16rpx;
        right: 16rpx;
        width: 46rpx;
        height: 46rpx;
        image {
          width: 46rpx;
          height: 46rpx;
        }
      }
      .pop-title {
        font-size: 36rpx;
        margin: 15rpx auto;
        color: #383838;
        text-align: center;
      }
      .box-now {
        width: 232rpx;
        height: 38rpx;
        background-color: #fff;
        font-size: 24rpx;
        color: #383838;
        text-align: center;
        border-radius: 10rpx;
        line-height: 38rpx;
        margin: 20rpx auto;
      }
      .box-list {
        height: 86rpx;
        background-color: #fff;
        border-radius: 10rpx;
        margin: auto;
        font-size: 24rpx;
        color: #808080;
        display: flex;
        align-items: center;

        .box-select {
          width: 168rpx;
          height: 50rpx;
          margin-left: 20rpx;
          background: #f5f5f5;
          border-radius: 14rpx;
          line-height: 50rpx;
          text-align: center;
        }
      }
      .box-num {
        margin: auto;
        width: 100%;
        height: 500rpx;
        .boxone {
          width: 674rpx;
          height: 204rpx;
          border-radius: 10rpx;
          margin: 20rpx auto;
          background-color: #fff;
          display: flex;
          justify-content: center;
          align-items: center;
          position: relative;

          .box-chooseimg {
            position: absolute;
            width: 674rpx;
            height: 204rpx;
            top: 0rpx;
            left: 0rpx;
            border-radius: 10rpx;
            background: rgba(94, 73, 143, 0.5);
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 40rpx;
            font-weight: 400;
            color: #fff;
          }

          .box-left {
            margin: 30rpx 0rpx;
            background-image: url('https://ojqn.wm2177.com/wechat_imgs/kapai-test/tianxuan/box.png');
            background-size: cover;
            width: 140rpx;
            height: 140rpx;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 35rpx;
            color: #fff;
            position: relative;

            .chooseImg {
              position: absolute;
              left: -20rpx;
              top: -20rpx;
              width: 60rpx;
              height: 60rpx;
            }
          }
          .box-right {
            display: flex;
            margin: 0rpx 30rpx 0rpx 30rpx;
            flex-wrap: wrap;
            justify-content: flex-start;
            max-height: 160rpx;
            display: flex;
            .Leavel-list {
              display: flex;
              flex-direction: column;
              justify-content: flex-start;
              width: 80rpx;
              height: 80rpx;
              margin: 0rpx 14rpx 0rpx 14rpx;
              .level-img {
                margin-top: 5rpx;
                image {
                  width: 62rpx;
                  height: 33rpx;
                }
              }
              .leavel-num {
                width: 70rpx;
                height: 30rpx;
                font-size: 16rpx;
                color: #a882ff;
                line-height: 30rpx;
                text-align: center;
                border: 2rpx solid #a882ff;
                // margin-top: 20rpx;
                border-radius: 6rpx;
              }
            }
          }
        }
      }
    }
    .goods-pop {
      width: 538rpx;
      height: 770rpx;
      background-color: #fff;
      border-radius: 26rpx;
      box-shadow: 0px 4rpx 8rpx rgba(115, 53, 53, 0.25);
      position: relative;
      border: 6rpx solid #740b00;
    }
    .popup-star {
      position: absolute;
      top: -45rpx;
      left: -4rpx;
      image {
        width: 90rpx;
        height: 88rpx;
      }
    }
    .popup-close {
      position: absolute;
      top: 16rpx;
      right: 16rpx;
      image {
        width: 46rpx;
        height: 46rpx;
      }
    }
    .popup-title {
      font-size: 36rpx;
      color: #000;
      margin-top: 15rpx;
      text-align: center;
    }
    .popup-img {
      width: 368rpx;
      height: 502rpx;
      margin: 30rpx auto;

      image {
        width: 368rpx;
        height: 502rpx;
        border-radius: 14rpx;
      }
    }
    .goods-detail {
      width: 440rpx;
      height: 112rpx;
      border: 4rpx solid #740b00;
      border-radius: 10rpx;
      margin: 40rpx auto;
      .goods-name {
        font-size: 28rpx;
        color: #740b00;
        text-align: center;
        -webkit-line-clamp: 2;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .goods-specs {
        display: flex;
        font-size: 20rpx;
        font-weight: 500;
        color: #fff;
        background-color: #b8a0e8;
        height: 35rpx;
        line-height: 35rpx;
        text-align: center;
        justify-content: space-evenly;
        margin-top: 6rpx;
        border-radius: 0rpx 0rpx 7rpx 7rpx;
      }
    }
    .order-pop {
      width: 730rpx;
      height: 900rpx;
      background-color: #fff;
      border-radius: 26rpx 26rpx 0rpx 0rpx;
      box-shadow: 0px 4rpx 8rpx rgba(115, 53, 53, 0.25);
      position: relative;
      border: 6rpx solid #740b00;
      margin: auto;
      .popup-close {
        position: absolute;
        top: 16rpx;
        right: 16rpx;
        image {
          width: 46rpx;
          height: 46rpx;
        }
      }
      .popup-title {
        font-size: 36rpx;
        color: #000;
        margin-top: 15rpx;
        text-align: center;
      }
      .order-top {
        display: flex;
        justify-content: space-around;
        margin: 30rpx auto;
        .left-img {
          width: 326rpx;
          height: 142rpx;
          image {
            width: 326rpx;
            height: 142rpx;
            border-radius: 10rpx;
          }
        }
        .right-tit {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          align-items: start;

          .title {
            font-size: 28rpx;
            color: #000;
            font-weight: 600;
          }
          .tit-mid {
            font-size: 20rpx;
            color: #808080;
          }
          .tit-num {
            font-size: 24rpx;
            font-weight: 600;
            display: flex;
            // justify-content: space-evenly;
          }
        }
      }
      .select-coupon {
        display: flex;
        justify-content: space-between;
        margin: 20rpx auto;
        width: 91%;
        font-weight: 600;
        .coupon-left {
          font-size: 24rpx;
          color: #000;
        }
        .coupon-right {
          font-size: 20rpx;
          color: #956fed;
          display: flex;
        }
      }
      .popup-line {
        width: 91%;
        margin: 30rpx auto;
        opacity: 0.5;
        border: 2rpx dashed #a6a6a6;
      }
      .payment-tit {
        font-size: 24rpx;
        color: #000;
        margin: 32rpx;
        font-weight: 600;
      }
      .payment-list {
        display: flex;
        flex-direction: column;
        .wechat {
          display: flex;
          justify-content: space-between;
          // margin-bottom: 35rpx;
          .wechat-left {
            display: flex;
            margin-left: 27rpx;
            .wechat-img {
              width: 64rpx;
              height: 52rpx;
              // margin-left: 30rpx;
              image {
                width: 64rpx;
                height: 52rpx;
              }
            }
            .wechat-tit {
              font-size: 26rpx;
              color: #383838;
              margin: auto;
              margin-left: 30rpx;
            }
          }
          .wechat-right {
            display: flex;
            .wechat-money {
              font-size: 24rpx;
              color: #916ae6;
              margin: auto;
              margin-right: 20rpx;
            }
            .select-icon {
              margin-right: 30rpx;
              width: 50rpx;
              height: 50rpx;
              image {
                width: 50rpx;
                height: 50rpx;
              }
            }
          }
        }
        .underage {
          font-size: 18rpx;
          color: #916ae6;
          margin: 10rpx auto;
        }
        .pay-button {
          width: 530rpx;
          height: 94rpx;
          margin: 10rpx auto;
          image {
            width: 530rpx;
            height: 94rpx;
          }
        }
        .pay-agree {
          width: 100%;
          // margin-top: 29rpx;
          font-size: 20rpx;
          color: #3d3d3d;
          text-align: center;
        }
      }
    }
  }
  .draw {
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.48);
    display: flex;
    flex-direction: column;
    .draw-title {
      width: 100%;
      height: 160rpx;
      display: flex;
      justify-content: center;
      position: relative;
      margin: 5% auto;
      image {
        width: 592rpx;
        height: 160rpx;
      }
    }

    .three-top {
      position: absolute;
      top: 230rpx;
      left: 30%;
      width: 304rpx;
      height: 412rpx;
      image {
        width: 304rpx;
        height: 412rpx;
        border-radius: 10rpx;
      }
      .goods-leavel {
        position: absolute;
        top: -6rpx;
        left: 0rpx;
        z-index: 99;
        image {
          width: 74rpx;
          height: 50rpx;
        }
      }
    }
    .five-top {
      position: absolute;
      top: 19%;
      left: 22%;
      width: 186rpx;
      height: 250rpx;
      image {
        width: 186rpx;
        height: 250rpx;
        border-radius: 5rpx;
      }
      .goods-leavel {
        position: absolute;
        top: -6rpx;
        left: 0rpx;
        z-index: 99;
        image {
          width: 74rpx;
          height: 50rpx;
        }
      }
    }
    .top-right {
      position: absolute;
      top: 19%;
      left: 54%;
    }
    .down-left {
      position: absolute;
      top: 38%;
      left: 7%;
    }
    .down-mid {
      position: absolute;
      top: 38%;
      left: 38%;
    }
    .down-right {
      position: absolute;
      top: 38%;
      left: 69%;
    }
    .three-left {
      position: absolute;
      left: 56rpx;
      top: 44%;
      width: 298rpx;
      height: 402rpx;
      image {
        width: 298rpx;
        height: 402rpx;
      }
    }
    .three-right {
      position: absolute;
      left: 52%;
      top: 44%;
      width: 298rpx;
      height: 402rpx;
      image {
        width: 298rpx;
        height: 402rpx;
      }
    }
    .goods-img {
      width: 376rpx;
      height: 526rpx;
      margin: 100rpx auto;
      position: relative;
      image {
        width: 376rpx;
        height: 526rpx;
        border-radius: 10rpx;
      }
      .goods-leavel {
        position: absolute;
        top: -6rpx;
        left: 0rpx;
        z-index: 99;
        image {
          width: 74rpx;
          height: 50rpx;
        }
      }
    }
    .get-btn {
      width: 460rpx;
      height: 88rpx;
      display: flex;
      justify-content: center;
      margin: 60rpx auto;
      image {
        width: 460rpx;
        height: 88rpx;
      }
    }
    .three-btn {
      position: absolute;
      top: 70%;
      left: 19%;
    }
  }
  .refresh {
    position: fixed;
    top: 75%;
    right: 40rpx;
    image {
      width: 108rpx;
      height: 108rpx;
    }
  }
</style>
